<!DOCTYPE html>
<html ng-app="chatRoomApp">
	<head>
		<meta charset="UTF-8">
		<base href="/">
		<title>模拟Smart QQ网页聊天室</title>
		<link rel="stylesheet" href="/css/d837b1b2.qq.css">
		<script src="/socket.io/socket.io.js"></script>
		<script src="/js/e7bf16da.qq.js"></script>
	</head>
	<body>

<!-- Begin Templates -->
<script type="text/ng-template" id="/page/login.html">
<div class="col-md-6 col-md-offset-3">
	<form class="form-horizontal" role="form" ng-submit="login()">
		<div class="form-group">
			<label class="col-md-3 control-label" for="username">用户名：</label>
			<div class="col-md-9">
				<input type="text" id="username" class="form-control" required placeholder="username" name="username" ng-model="username" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-3 control-label" for="password">密码：</label>
			<div class="col-md-9">
				<input type="password" id="password" class="form-control" required placeholder="password" name="password" ng-model="password" />
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-offset-3 col-md-9">
				<button type="submit" class="btn btn-primary">Sign in</button>
				<p class="help-block">还没有账户？<a href="/register">点击注册</a></p>
			</div>
		</div>
	</form>
</div>
</script>

<script type="text/ng-template" id="/page/register.html">
<div class="col-md-6 col-md-offset-3">
	<form class="form-horizontal" role="form" ng-submit="register()">
		<div class="form-group">
			<label class="col-md-3 control-label" for="username">用户名：</label>
			<div class="col-md-9">
				<input type="text" id="username" class="form-control" required placeholder="username" name="username" ng-model="username" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-3 control-label" for="password">密码：</label>
			<div class="col-md-9">
				<input type="password" id="password" class="form-control" required placeholder="password" name="password" ng-model="password" />
			</div>
		</div>
		<div class="form-group">
			<label class="col-md-3 control-label" for="password2">再次输入密码：</label>
			<div class="col-md-9">
				<input type="password" id="password2" class="form-control" required placeholder="password" ng-model="password2" />
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-offset-3 col-md-9">
				<button type="submit" class="btn btn-primary">Create an account</button>
				<p class="help-block">已有账户？<a href="/login">点击登录</a></p>
				<p class="text-danger text-center">{{points}}</p>
			</div>
		</div>
	</form>
</div>
</script>

<script type="text/ng-template" id="/page/room.html">
<div class="col-md-9">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title text-center">{{info.name}}<button type="button" class="btn btn-default btn-xs pull-right" ng-click="closeRoom()">关闭</button></h3>
		</div>
		<div class="panel-body" id="messageScroll" auto-scroll>
			<div class="media" ng-repeat="message in info.messages track by $index">
				<div ng-if="message.creator._id == mine._id">
					<div class="media-body text-right">
						<h5 class="media-heading"><time am-time-ago="message.createAt" class="time"></time>{{message.creator.name}}</h5>
						<p class="alert alert-info">{{message.content}}</p>
					</div>
					<a href="javascript:;" class="media-right"><img ng-src="{{message.creator.headUrl}}"></a>
				</div>
				<div ng-if="message.creator.name == '机器人'">
					<p class="text-muted text-center">{{message.content}}&nbsp;&nbsp;<time am-time-ago="message.createAt" class="time"></time></p>
				</div>
				<div ng-if="message.creator._id != mine._id && message.creator.name != '机器人'">
					<a href="javascript:;" class="media-left"><img ng-src="{{message.creator.headUrl}}"></a>
					<div class="media-body">
						<h5 class="media-heading">{{message.creator.name}}<time am-time-ago="message.createAt" class="time"></time></h5>
						<p class="alert alert-info">{{message.content}}</p>
					</div>
				</div>
			</div>
		</div>
		<div class="panel-footer">
			<form class="form-horizontal" role="form" ng-controller="MessageCreatorCtrl">
				<div class="form-group mb0">
					<div class="col-md-12">
						<textarea class="form-control" placeholder="Ctrl + Enter send message" ctrl-enter-break="sendMessage()" ng-model="newMessage"></textarea>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
<div class="col-md-3">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">在线用户</h3>
		</div>
		<ul class="list-group">
			<li class="list-group-item" ng-repeat="user in info.users"><img ng-src="{{user.headUrl}}" class="thumbnail-img">{{user.name}}</li>
		</ul>
	</div>
</div>

</script>

<script type="text/ng-template" id="/page/rooms.html">
<div class="col-md-12">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title">群组</h3>
		</div>
		<div class="panel-body" style="height: 660px;">
			<div class="form-group">
				<input type="text" class="form-control" placeholder="Search" ng-model="searchKey" ng-change="searchRoom()" />
			</div>
			<div class="alert alert-warning" role="alert" ng-show="rooms.length == 0 && searchKey">
				<div class="form-group"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>没有找到附和您要求的聊天室，<strong>创建一个？</strong></div>
				<button type="button" class="btn btn-warning btn-block" ng-click="createNewRoom()">创建</button>
			</div>
			<ul class="list-group" id="groupScroll" auto-scroll>
				<a href="javascript:;" class="list-group-item" ng-repeat="room in rooms" ng-click="enterRoom(room)"><img src="http://static.vrbig.com/net/head/header-group.jpg">{{room.name}}<span class="badge">{{room.users.length}}</span></a>
			</ul>
		</div>
	</div>
</div>
</script>
<!-- End Templates -->


		<div class="container" style="margin-top: 100px;">
			<div class="row" ng-show="mine" style="margin-bottom: 20px;">
				<div class="col-md-4">
					<div class="media">
						<a href="javascript:;" class="media-left"><img ng-src="{{mine.headUrl}}"></a>
						<div class="media-body">
							<h4 class="media-heading">{{mine.name}}</h4>
							Hello World
						</div>
						<div class="media-right"><button type="button" class="btn btn-default" ng-click="logout()">退出帐号</button></div>
					</div>
				</div>
			</div>
			<div class="row" ng-view=""></div>
		</div>
	</body>
</html>
